<template>
  <div class="m-login">
    <h1>
      <img class="logo-small" src="../assets/logo.png"  @click="$router.push('/')" style="cursor: pointer;"/> 
    </h1>    
    <div class="main-wrap">
      <img class="main-img" src="../assets/pg.png" />
      <div class="login-container clearfix">
        <w-form-validate @on-validate="onValid">
          <div class="login-wrap fr">
            <div class="main-pad">
              <h3>欢迎登录</h3>
            <div class="input-box clearfix phone">
              <span class="fl login-title">
                <img src="../assets/ico_login_username.png"/>
              </span>  
              <w-input class="fl login-input" type="text" v-model="username" holder="请输入手机号码" rule="isEmpty|isMobile" error="请输入手机号码|亲，请输入正确的手机号码|亲，该手机号码未注册" :maxlength="11"></w-input>
            </div> 
            <div class="input-box clearfix password">
              <span class="fl login-title">
                <img src="../assets/ico_login_password.png"/>
              </span>  
              <w-input class="fl login-input" type="password" v-model="password" holder="请输入登录密码" rule="isEmpty|isPassword" error="请输入登录密码|亲，您的密码不正确" :maxlength="16"></w-input>
            </div>    
            <w-button type="main">登录</w-button>
            <div class="link-group clearfix">
              <router-link to="/register" class="fl">立即注册</router-link>
              <router-link to="/forget" class="fr">忘记密码</router-link>
            </div>
            </div>
          </div>
        </w-form-validate>
      </div>
    </div>
    <w-login-footer></w-login-footer>
  </div>
</template>

<script>
  import { apiLogin, apiOrderAll } from 'js/api'
  import { mapActions, mapGetters, mapMutations } from 'vuex'
  import { USER_ROLE } from 'js/config'

  export default {
    data() {
      return {
        username: '',
        password: '',
        localIp: ''
      }
    },
    computed: {
      ...mapGetters(['mobile', 'token'])
    },
    created() {
      this.localIp = returnCitySN['cip']
      this.fetchMobile()
    },
    methods: {
      ...mapActions(['fetchCartCount']),
      ...mapMutations(['updateMsgList']),
      fetchMobile() { // 记住手机号
        this.username = (this.mobile || sessionStorage.getItem('mobile'))
      },
      // 登录
      onValid() {
        apiLogin(this.username, md5(this.password), this.localIp || '').then((data) => {
          if (data.code == '1004') {
            this.$toast('亲，该手机号码未注册', () => {
              this.$router.push('./register')
              // 清空当前页的用户，密码
              this.username = ''
              this.password = ''
            })
          } else if (data.code == '200') {
            // 保存当前的用户所有数据，包括access_to，头像，昵称等
            this.$store.commit('updateUserInfo', data.data)
            sessionStorage.setItem('mobile', this.username)
            // 当前是采购商，BUYER
            if (data.data.userRole != USER_ROLE.CUSTOMER) {
              // 登录成功后，获取导航的数据
              this.fetchCartCount(this.token)
              apiOrderAll(this.token, 1, '', '', 3).then(data => {
                this.updateMsgList(data.orderFormList)
              })
              // 根据路由跳转页面
              if (this.$route.query.redirect) {
                this.$router.push(this.$route.query.redirect)
              } else {
                // 成功登陆，跳转首页
                this.$router.push('/')
              }
            // 判断是否是销售，如果是CUSTOMER则直接去聊天页面
            } else if (data.data.userRole == USER_ROLE.CUSTOMER) {
              this.$router.push('/chat')
            }
          } else if (data.code == '1003') {
            this.$toast('亲，您的密码不正确')
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  .w-input {
    .error-tip {
      margin-top: -17px!important;
    }
  }
  .login-input {
    .form-control {
      height: 38px;
    }
  }
</style>

<style lang="scss" scoped>
  @import '../scss/_var.scss';
  $fontSize: 14px;
  h1 {
    img {
      margin: 42px auto 24px 192px;
    }
  }
  .m-login {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    min-width: 1230px;
    z-index: 20;
    background: #f6f6f6;
  }
  .main-wrap {
    .main-img {
      height: 532px;
    }
  }
  .login-container {
    position: absolute;
    width: 1000px;
    height: 532px;
    top: 110px;
    left: 0;
    right: 0;
    margin: 0 auto;
    .login-wrap {
      width: 301px;
      height: 380px;
      margin: 76px 0;
      .main-pad{
        padding: 0 41px;
        height: inherit;
        h3 {
          font-size: 24px;
          color: $color-dark;
          padding: 44px 0 42px 0;
        }
        background: $color-white;
        .input-box {
          .login-title {
            width: 38px;
            height: 38px;
            border: 1px solid $color-btn-ghost-bd;
            border-right: none;
            img {
              background: $bg-gray;
            }
          }
          &.phone {
            margin-bottom: 16px;
          }
          &.password {
            margin-bottom: 37px;
          }
          .login-input {
            display: inline-block;
            width: calc( 100% - 38px );
          }
        }
        .main {
          width: 100%;
          font-size: 18px;
          margin-bottom: 30px;
        }
      }
    }
  }
</style>